﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BootstrapExemp._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Formulário Bootstrap</title>
    <link href="Scripts/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/css/panelBootstrap3.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script src="Scripts/js/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="Scripts/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="Scripts/js/highcharts.js" type="text/javascript"></script>
    
    <div class="container">

      <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">FormStrap</a>
            <ul class="nav">
                <li class="active"><a href="~/Default.aspx">Início</a></li>
                <li><a href="#">Lore</a></li>
                <li><a href="#">Envolvidos</a></li>
            </ul>
            <ul class="nav pull-right">
              <li style="padding-top:10px"><i class="icon-user"></i></li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Admin<b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Alterar Conta</a></li>
                    <li><a href="#">Logout</a></li>
                  </ul>
              </li>
            </ul>
        </div>
      </div>

      <div class="hero-unit">
        <h1>Fomulário</h1>
        <p>Este formulário foi desenvolvido apenas para teste, utilizando o framework bootstrap</p>
        <p>
          <a id="btnIniciar" class="btn btn-primary btn-large" onclick="showdiv()">Ocultar formulário</a>
        </p>
        <script type="text/javascript">
            function showdiv() {
                if (this.corpo.style.display.toString() == 'inline') {
                    this.corpo.style.display = 'none';
                    $("#btnIniciar").text('Exibir formulário');
                }
                else{
                    this.corpo.style.display = 'inline';
                    $("#btnIniciar").text('Ocultar formulário');
                }
              
            };
        </script>
      </div>

      <div id="corpo" runat="server" style="display:inline">
    
        <div class="alert alert-block">
          <button type="button" class="close" data-dismiss="alert" href="#">×</button>
          <strong>Informação!</strong> Este mês todos os inscritos receberão um bônus
        </div>

        <div class="row-fluid">
            <%--Área do Accordion--%>
            <div class="span5">
                <div class="accordion" id="accordionTeste">
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionTeste" href="#collapseInformacoes">
                        Informações
                      </a>
                    </div>
                    <!--<div id="collapseInformacoes" class="accordion-body collapse in"> Deixa começando já com o item aberto classe IN-->
                    <div id="collapseInformacoes" class="accordion-body collapse">
                      <div class="accordion-inner">
                        Aqui você econtrará um página feita utilizando o framework bootstrap. Uma página simples, apenas para adquirir um base 
                        de conhecimento maior em relação a este framework. 
                      </div>
                    </div>
                  </div>
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionTeste" href="#collapseDesenvolvidoEm">
                        Desenvolvido em
                      </a>
                    </div>
                    <div id="collapseDesenvolvidoEm" class="accordion-body collapse">
                      <div class="accordion-accordion-inner">
                        <ul style="padding-left:6px">
                            <li>CSS</li>
                            <li>JavaScript</li>
                            <li>Bootstrap</li>
                            <li>Highcharts</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionTeste" href="#collapseInfoEspeciais">
                        Informações especiais
                      </a>
                    </div>
                    <div id="collapseInfoEspeciais" class="accordion-body collapse">
                      <div class="accordion-inner">
                        Highcharts is solely based on native browser technologies and doesn't require client side plugins like Flash or Java. 
                           Furthermore you don't need to install anything on your server. No PHP or ASP.NET. Highcharts needs only two JS files to run: The highcharts.js 
                           and either the jQuery, MooTools, Prototype or Highcharts Standalone framework. The Highcharts Standalone framework is designed for those who 
                           do not already use jQuery, MooTools or Prototype in their web page, and wish to use Highcharts with minimal overhead.
                      </div>
                    </div>
                  </div>
                </div>

                <div runat="server" id="containerHighcharts">
                    <asp:Literal ID="ltrChart" runat="server"></asp:Literal>
                </div>
              
                <%--<script type="text/javascript">
                    $(function () {
                        $('#containerHighcharts').highcharts.highcharts({
                            chart: {
                                type: 'bar'
                            },
                            title: {
                                text: 'Usuários Cadastrados'
                            },
                            xAxis: {
                                categories: ['Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
                            },
                            yAxis: {
                                title: {
                                    text: 'Meses'
                                }
                            },
                            series: [{
                                name: 'Homens',
                                data: [5, 8, 18, 15, 32]
                            }, {
                                name: 'Mulheres',
                                data: [7, 13, 22, 3, 21]
                            }]
                        });
                    });

                    
                </script>--%>
            </div>
        
            <div runat="server" id="divFormulario" class="span7" visible="true">
            
                <div class="alert alert-info">
                  <button type="button" class="close" data-dismiss="alert" href="#">×</button>
                  <strong>Importante!</strong> Não esquecer de preencher o cadastro
                </div>

                <form id="formFormulario" action="#" class="form-horizontal" runat="server">
                <asp:ScriptManager ID="scpManager" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="updatePanelForm" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                    <div id="divPanel" runat="server" class="panel panel-info">
                      <div class="panel-heading">
                        <!--<h3 class="panel-title">Cadastro</h3>-->
                        <p style="font-size:x-large; text-align:center; padding-top:7px;"><strong>Cadastro de Usuário</strong></p>
                      </div>
                        <div class="panel-body">

                        <div class="control-group">
                          <label class="control-label">Nome</label>
                            <div class="controls">
                              <asp:TextBox runat="server" AutoPostBack="true" ID="txtInpNome" CssClass="input-xlarge" placeholder="Nome..." OnTextChanged="teste_TextChanged"></asp:TextBox>
                              <i class="icon-remove-sign" id="iconErroNome" runat="server" visible="false"></i>
                            </div>
                        </div>

                        <div class="control-group">
                          <label class="control-label">Sobrenome</label>
                          <div class="controls">
                            <input runat="server" id="txtInpSobrenome" type="text" placeholder="Sobrenome..." class="input-xlarge"/>
                            <i class="icon-remove-sign" id="iconErroSobrenome" runat="server" visible="false"></i>
                          </div>
                        </div>

                        <div class="control-group">
                          <label class="control-label">Senha</label>
                          <div class="controls">
                            <input runat="server" id="passwordInputSenha" type="password" placeholder="Senha..." class="input-xlarge"/>
                            <i class="icon-remove-sign" id="iconErroSenha" runat="server" visible="false"></i>
                          </div>
                        </div>

                        <div class="control-group">
                          <label class="control-label">Confirmar Senha</label>
                            <div class="controls">
                              <input runat="server" id="passwordInputConfirmarSenha" type="password" placeholder="Senha..." class="input-xlarge" />
                              <i class="icon-remove-sign" id="iconErroConfirmarSenha" runat="server" visible="false"></i>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Sexo</label>
                            <div class="controls">
                                <asp:RadioButtonList ID="radioSexo" runat="server" CssClass="radio inline" RepeatDirection="Horizontal" RepeatLayout="Flow" >
                                  <asp:ListItem Selected="True">Masculino</asp:ListItem>
                                  <asp:ListItem >Feminino</asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                          <%--<label id="lblrs" runat="server" class="control-label" for="radiosSexo">Sexo</label>
                          <div class="controls">
                            <label runat="server" class="radio inline" for="radiosSexoMasc">
                              <input runat="server" type="radio" name="radiosSexo" id="radiosSexoMasc" value="Masculino" checked="checked"/>
                              Masculino
                            </label>
                            <label runat="server" class="radio inline" for="radiosSexoFem">
                              <input runat="server" type="radio" name="radiosSexo" id="radiosSexoFem" value="Feminino"/>
                              Feminino
                            </label>
                          </div>--%>
                        </div>

                        <div class="control-group">
                          <label class="control-label" for="selectbasicConhecimento">Como nos conheceu...</label>
                          <div class="controls">
                            <select runat="server" id="selectbasicConhecimento" name="selectbasicConhecimento" class="input-xlarge">
                              <option>Rádio</option>
                              <option>Jornal/Revistas</option>
                              <option>Televisão</option>
                              <option>Internet</option>
                              <option>Através de amigo</option>
                              <option disabled="disabled"></option>
                            </select>
                          </div>
                        </div>

                        <div class="control-group">
                          <label class="control-label" for="textareaObservacao">Observações</label>
                          <div class="controls">                     
                            <textarea runat="server" id="textareaObservacao" name="textareaObservacao"></textarea>
                            <i class="icon-remove-sign" id="iconErroObservacao" runat="server" visible="false"></i>
                          </div>
                        </div>

                        <div class="control-group">
                          <label runat="server" class="control-label" for="checkboxesInformacoes">Receber informações...</label>
                          <div class="controls">
                            <label class="checkbox inline" for="checkboxesInformacoes-0">
                              <input type="checkbox" name="checkboxesInformacoes" id="checkboxesInformacoes-0" value="Sql Server"/>
                              Sql Server
                            </label>
                            <label class="checkbox inline" for="checkboxesInformacoes-1">
                              <input type="checkbox" name="checkboxesInformacoes" id="checkboxesInformacoes-1" value="Oracle"/>
                              Oracle
                            </label>
                            <label class="checkbox inline" for="checkboxesInformacoes-2">
                              <input type="checkbox" name="checkboxesInformacoes" id="checkboxesInformacoes-2" value="MySql"/>
                              MySql
                            </label>
                            <label class="checkbox inline" for="checkboxesInformacoes-3">
                              <input type="checkbox" name="checkboxesInformacoes" id="checkboxesInformacoes-3" value="PostgreSql"/>
                              PostgreSql
                            </label>
                          </div>
                        </div>

                        <div class="btn-toolbar" style="text-align:center">
                          <asp:Button ID="btnEnviar" CssClass="btn btn-success" runat="server" Text="Enviar" OnClick="Enviar_Click" />
                            <asp:Literal ID="LiteralDialog" runat="server"></asp:Literal>
                          <asp:Button ID="btnLimpar" CssClass="btn btn-warning" runat="server" Text="Limpar" OnClick="Limpar_Click" />
                        </div>

                      </div>
                    </div>

                    <div runat="server" id="divFormularioCompleto" class="span7" visible="false">
                        <div class="alert alert-block alert-success">
                          <button type="button" class="close" data-dismiss="alert" href="#">×</button>
                          <strong>Concluído!</strong> Usuário inserido com sucesso.
                        </div>
                        <asp:Button ID="btnNovoUsuario" CssClass="btn btn-warning" runat="server" Text="Novo Usuário" OnClick="NovoUsuario_Click" />
                    </div>
                </ContentTemplate>
                </asp:UpdatePanel>
                </form>
            </div>
        </div>
        
        <div class="row">
            <div class="span3">
                <h2>Conexões remotas</h2>
                <p>A utilização de serviços de compartilhamento de tela e controle remoto é útil em situações onde é preciso 
                   automatizar uma tarefa que deve ser realizada diretamente na interface gráfica do sistema operacional.</p>
                <p><a class="btn" href="#">Saiba mais &raquo;</a></p>
            </div>
            <div class="span3">
                <h2>Push Notifications</h2>
                <p>The Microsoft Push Notification Service in Windows Phone is an asynchronous, best-effort service that offers third-party 
                   developers a channel to send data to a Windows Phone app from a cloud service in a power-efficient manner.</p>
                <p><a class="btn" href="#">Saiba mais &raquo;</a></p>
            </div>
            <div class="span6">
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <img class="img-responsive" src="http://thiagonasc.com/blog/wp-content/uploads/2013/10/img_destaque.jpg" />
                    </div>
                    <div class="timeline-body">
                      <p>Desenhado e construído com todo amor do mundo por @mdo e @fat.
                         Este projeto é uma versão do Twitter Bootstrap da globo.com mantido por Alexandre Magno.
                         Código licenciado sob Apache License v2.0, documentação sob CC 3.0.
                      </p>              
                    </div>
                    <div class="timeline-footer">
                        <a><i class="icon-thumbs-up"></i></a>
                        <a><i class="icon-share"></i></a>
                        <a class="pull-right">Continuar Lendo</a>
                    </div>
                  </div>
            </div>
        </div>

        <%--<a id="tooltip" href="#" rel="tooltip" title="primeiro tooltip">passe o mouse</a>
        <script type="text/javascript">
            $('#tooltip').tooltip('Testando tooltip do bootstrap')
        </script>

        <ul class="nav nav-pills">
          <li class="active">
            <a href="#">Início</a>
          </li>
          <li><a href="#">Meio</a></li>
          <li><a href="#">Fim</a></li>
        </ul>--%>

        <%--<div class="btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Opções
            <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li><a tabindex="-1" href="#">Enviar</a></li>
                <li><a tabindex="-1" href="#">Limpar</a></li>
                <li class="divider"></li>
                <li><a tabindex="-1" href="Default.aspx">Página Inicial</a></li>
            </ul>
        </div>--%>
        
        </div>
    </div>
</body>
</html>
